<template>
  <div class="lunbo">
    <div class="bigBox" ref="box">
        <wc-swiper v-if="$store.state.home.bannerList.length" ref="swiper">
            <wc-slide v-for="item in $store.state.home.bannerList" :key="item.id">
                <a href="#/home/banner"><img :src="item.src" alt="" /></a>
            </wc-slide>
        </wc-swiper>
    </div>
  </div>
</template>

<script>
export default {
  name: "lunbo",
  data() {
    return {
      
    };
  },
  methods: {
    dotClick() {
      console.log(111);
    },
  },
  created() {
    this.$nextTick(() => {
      let _this = this;
      this.$refs.box.onclick = function (e) {
        //   console.log(e.target)
        if (e.target.className == "wc-dot") {
          // 转为真数组获取下标
          // console.log([...e.target.parentNode.childNodes].indexOf(e.target))
          let index = [...e.target.parentNode.childNodes].indexOf(e.target);
          _this.$refs.swiper.slideTo(index);
        }
      }
      // 事件委托
    //   document.querySelector(".wc-pagination").onclick = function (e) {
    //     // console.log(e.target)
    //     if (e.target.className == "wc-dot") {
    //       // 转为真数组获取下标
    //       // console.log([...e.target.parentNode.childNodes].indexOf(e.target))
    //       let index = [...e.target.parentNode.childNodes].indexOf(e.target);
    //       _this.$refs.swiper.slideTo(index);
    //     }
    //   };
    });
  },
};
</script>

<style lang="less" scoped>
.lunbo {
  position: relative;
  .bigBox {
    width: 100%;
    margin: 0 auto;
  position: relative;
    img {
      width: 100%;
      height: 200px;
    }
    .arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    .arrow.right {
      right: 0;
    }    
  }
}
</style>